<template>
  <div class="map-water-mark">
    <el-watermark :rotate="-36" :zIndex="4" :font="{ color: waterMarkTextColor }" :gap="[75, 75]" :content="content || 'GimiMind在线思维导图'">
      <div class="c" :style="{ width: `${width}px`, height: `${height}px` }"></div>
    </el-watermark>
  </div>
</template>

<script setup>
import { color, rgb } from 'd3-color'
import { ref, nextTick, defineProps, computed } from 'vue'

const props = defineProps({
  content: String,
  backgroundColor: String
})
const [width, height] = [ref(0), ref(0)]
function initWaterMarkSize () {
  const bodyEle = document.querySelector('body')
  const { clientWidth, clientHeight } = bodyEle
  width.value = clientWidth
  height.value = clientHeight
}

const waterMarkTextColor = computed(() => {
  const backgroundColor = props.backgroundColor
  if (!backgroundColor) return
  const { r, g, b } = rgb(backgroundColor).clamp()
  const grayLevel = r * 0.299 + g * 0.587 + b * 0.114
  if (grayLevel < 127) return '#FFFFFF25'
  return color(backgroundColor).darker(0.25).hex()
})
nextTick(initWaterMarkSize)
</script>

<style lang="scss" scoped>
.map-water-mark {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}
</style>
